/**
 * 表单值获取
 * 调用举例： 
 *      获取并序列化：$formSeria.seria('form1') form1 ： 为form的属性name，目前只支持 name
 *      自动填充： $formSeria.autoFill('form1', fromData) form1 ： 为form的属性name，目前只支持 name， fromData 为填充数据
 * 表单input 里设置 data-value 属性，会优先使用 data-value ，否则使用value
 */

const FormSerialize = function () { }
FormSerialize.prototype = {
  /**
   * 
   * @param {String} formName 表单名字 name
   * @param {Object} data 自动填充数据
   */
  autoFill (formName, data) {
    var elements = document[formName]
    // debugger
    const inputArr = elements.querySelectorAll('input');
    const textareaArr = elements.querySelectorAll('textarea');
    // let arr = []
    // arr = arr.concat(inputArr,textareaArr)
    // inputArr.concat(textareaArr)

    // debugger
    // input
    for (let dom of inputArr) {
      const key = dom.name
      const val = data[key]
      if (!this.isNull(val)) {
        this.fillForm(dom, val) // 自动填充
      }
    }

    // textarea
    for (let dom of textareaArr) {
      const key = dom.name
      const val = data[key]
      // debugger
      if (!this.isNull(val)) {
        this.fillForm(dom, val) // 自动填充
      }
    }

  },
  /**
   * 调用方法
   * @param {String|Object} formName name
   */
  seria: function (formName) {
    var elements = document[formName]
    // debugger
    const arr = [];
    const Obj = {}

    const inputArr = elements.querySelectorAll('input');
    const textareaArr = elements.querySelectorAll('textarea');
    // const checkboxArr = elements.querySelectorAll('checkbox');
    // const radioArr = elements.querySelectorAll('radio');

    // console.log('inputArr:', inputArr)
    // console.log('textareaArr:', textareaArr)
    // console.log('checkboxArr:', checkboxArr)
    // console.log('radioArr:', radioArr)

    // input
    for (let dom of inputArr) {
      // debugger
      var res = this.serializeElement(dom)
      if (res.arr && res.arr.length) {
        arr.push(res.arr)
      }
      for (let key in res.obj) {
        if (key && res.obj.hasOwnProperty(key)) {
          Obj[key] = res.obj[key]
        }
      }
      // debugger
    }

    // input
    for (let dom of textareaArr) {
      // debugger
      var res = this.serializeElement(dom)
      if (res.arr && res.arr.length) {
        arr.push(res.arr)
      }

      for (let key in res.obj) {
        if (key && res.obj.hasOwnProperty(key)) {
          Obj[key] = res.obj[key]
        }
      }

    }
    // debugger
    const params = {
      obj: Obj,
      str: arr.join('&')
    };
    console.log('params:', params)
    return params
  },
  /**
   * 非表单详情页自动填充调用方法
   * @param {String|Object} domId id
   */
  autoFillDetail: function (domId, data) {
    if (this.isNull(data) && this.isNull(domId)) {
      return
    }
    var elements = document.querySelectorAll(domId + ' .value-cls');

    // debugger
    // input
    for (let dom of elements) {
      let key = dom.dataset.name;

      // debugger

      if (!key) {
        key = dom.getAttribute('name');
      }

      let val = data[key]
      // 勿删！！！
      // if (key && !this.isNull(val)) {
      //     if (dom.type && (dom.type.toLowerCase() === 'text' || dom.type.toLowerCase() === 'textarea')) {
      //         dom.value = val
      //     } else {
      //         dom.innerText = val
      //     }
      // }

      if (this.isNull(val)) {
        // val = key + '-没有值'
        val = ''
      }
      if (dom.type && (dom.type.toLowerCase() === 'text' || dom.type.toLowerCase() === 'textarea' || dom.type.toLowerCase() === 'hidden')) {
        dom.value = val
      } else if (dom.type && (dom.type.toLowerCase() === 'checkbox' || dom.type.toLowerCase() === 'radio')) {
        dom.setAttribute('checked', !!val)
      } else {
        dom.innerText = val
      }

      // console.log('key:', key, val)
    }


  },
  /**
   * 重置表单
   * @param {String} formName 表单名字
   * @param {Object} data 选传 选择性重置表单项
   */
  resetForm (formName, data) {
    if (this.isNull(formName)) {
      return
    }
    const isDataNull = this.isNull(data);
    var elements = document[formName]
    const inputArr = elements.querySelectorAll('input');
    const textareaArr = elements.querySelectorAll('textarea');

    // debugger
    // input
    for (let dom of inputArr) {
      this.resetElement(dom, data, isDataNull)
    }

    // textarea
    for (let dom of textareaArr) {
      this.resetElement(dom, data, isDataNull)
    }
  },
  /**
   * 重置表单项 input textarea
   * @param {Object} dom 
   * @param {Object} data 
   * @param {String|Number|Boolean} val 
   */
  resetElement (dom, data, isDataNull) {
    const key = dom.name;
    let flag = true;
    let val = '';
    if (!isDataNull) {
      flag = false
      for (let k in data) {
        if (k && data.hasOwnProperty(key)) {
          flag = true
          val = data[key]
          break;
        }
      }
    }

    if (flag) {
      this.fillForm(dom, val) // 自动填充
    }
  },
  /**
   * 序列化 表单
   * @param {Object} element 
   */
  serializeElement (element) {
    var results = {
      arr: [],
      obj: {}
    };
    var parameter = this.getFormKeyVal(element);
    if (parameter) {
      // debugger
      var key = encodeURIComponent(parameter[0]);
      // debugger
      if (!this.isNull(key)) {
        if (parameter[1].constructor != Array) {
          parameter[1] = [parameter[1]];
        }
        var values = parameter[1];
        for (var i = 0; i < values.length; i++) {
          let val = values[i]
          if (this.isNull(val)) {
            val = null
          }
          results.arr.push(key + '=' + encodeURIComponent(val));
          results.obj[key] = val
        }
      }

    }
    return results;
  },
  /**
   * 获取表单的键值 key:value
   * @param {Object} element 
   */
  getFormKeyVal: function (element) {
    switch (element.type.toLowerCase()) {
      case 'textarea':
      // case 'submit':
      case 'hidden':
      case 'password':
      case 'text':
        let value = ''
        if (element.dataset && element.dataset.value !== null && element.dataset.value !== undefined) {
          value = element.dataset.value
        } else {
          value = element.value
        }
        return [element.name, value];
      case 'checkbox':
        let val = ''
        if (element.checked) {
          val = element.value
        } else {
          val = false
        }
        // debugger
        return [element.name, val];
      case 'radio':
        const arr = this.inputSelector(element);
        return arr
    }
    return false;
  },
  /**
   * 表单元素动填充
   * @param {Object} element dom元素
   * @param {String|Number|Boolean} value 表单值
   */
  fillForm: function (element, value) {
    switch (element.type.toLowerCase()) {
      case 'textarea':
      case 'hidden':
      case 'password':
      case 'text':
        if (element.dataset && element.dataset.value !== null && element.dataset.value !== undefined) {
          element.dataset.value = value
        }
        // debugger
        element.value = value;
        break;
      case 'checkbox':
      case 'radio':
        let eleVal = element.value
        if (!isNaN(value)) {
          eleVal = Number(eleVal)
          value = Number(value)
        }

        if (eleVal === value) {
          element.setAttribute('checked', 'checked')
        }
        // const arr = this.inputSelector(element);
        break;
    }
    return false;
  },
  /**
   * 待验证 获取单个input中的【name,value】数组 
   * @param {Object} element 
   */
  inputSelector: function (element) {
    // debugger
    let result = []
    if (element.checked) {
      let value = ''
      if (element.dataset) {
        const val = element.dataset.value
        if (!this.isNull(val)) {
          value = val
        } else {
          value = element.value
        }
      } else {
        value = element.value
      }
      // debugger
      result = [element.name, value];
    }
    return result
  },
  /**
     * 判断是否为空
     */
  isNull: function (val) {
    if (val instanceof Array) {
      if (val.length === 0) return true
    } else if (val instanceof Object) {
      if (JSON.stringify(val) === '{}') return true
    } else {
      if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true
      return false
    }
    return false
  }
}
let $formSeria = null
$formSeria = new FormSerialize();
export default $formSeria;
window.$formSeria = $formSeria;